<template>
  <div class="templates xl:min-w-[300px] min-w-[200px]">
    <a-card :title="t['模板列表']" class="head">
      <template #extra>
        <a-input-search
          v-model="query.themeName"
          allow-clear
          @search="getList"
          @keydown.enter="getList"
        />
      </template>
      <div class="flex justify-between mb-3">
        <a-pagination
          :current="query.pageNum"
          :total="query.total!"
          size="mini"
          :page-size="query.pageSize"
          @change="onPageChange"
          @page-size-change="pageSizeChange"
        />
        <a-button @click="getList">
          <IconRefresh />
        </a-button>
      </div>
      <div class="flex text-nowrap gap-2 items-center my-2">
        <div>{{ t["分类"] }}</div>
        <LcdThemeSelector
          :scoped="ENUM_DATA_SCOPE.THIS_SHOP"
          v-model="query.category"
          @change="getList"
        >
        </LcdThemeSelector>
      </div>
      <a-spin :loading="loading" class="w-full" v-if="templateList?.length > 0">
        <div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
          <a-card
            v-for="item in templateList"
            :key="item.groupsId"
            hoverable
            class="image-card w-full"
            :body-style="{ padding: '0 8px' }"
            :class="{ active: currentGroup?.groupsId === item.groupsId }"
            @click="selectItem(item)"
          >
            <template #cover>
              <div class="text-center image">
                <a-image
                  :preview="false"
                  class="w-full"
                  alt="dessert"
                  height="100px"
                  :src="item.items[0].imgSrc"
                />
              </div>
            </template>
            <a-card-meta :title="item.name"> </a-card-meta>
          </a-card>
        </div>
      </a-spin>
      <a-empty v-else />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { listTheme } from "@/api/service/theme/theme";
import { LcdGroup } from "@/api/service/theme/types";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import { useQuery } from "@/hook/useTableConfig";
import { Message } from "@arco-design/web-vue";
import { dispatchModal, form } from "../../data/form";
import { currentGroup, previewToggle, selectedProductIds, themeList } from "../data/data";

const t = translate("公共模块");
const templateList = ref<LcdGroup[]>([]);
const loading = ref(false);

const query = useQuery({
  queryType: "0",
  themeName: "",
  pageSize: 10
});

const getList = async () => {
  try {
    loading.value = true;
    const data = await listTheme(query.value);
    templateList.value = data.rows;
    query.value.total = data.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const selectItem = async (item: LcdGroup) => {
  const target = item.items.find((e) => {
    if (e.groupsIndex === selectedProductIds.value.length) {
      return e;
    }
    return null;
  });
  if (!target) {
    Message.warning(t.value?.["商品数量与模板显示数量不匹配"]);
    return;
  }
  themeList.value = item.items;
  currentGroup.value = item;

  previewToggle.value++;
};

const onPageChange = (num: number) => {
  query.value.pageNum = num;
  getList();
};
const pageSizeChange = (size: number) => {
  query.value.pageSize = size;
  getList();
};
watch(dispatchModal, () => {
  if (!dispatchModal.value) return;
  query.value.resolutionId = form.value.resolutionId;
  if (currentGroup.value.groupsId) {
    themeList.value = currentGroup.value.items;
  }
  getList();
});
</script>

<style lang="scss" scoped>
.templates {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.head {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 12px;
}

.image-card {
  margin-bottom: 8px;
  cursor: pointer;
  .image {
    background-color: #f8f5f6;
  }
}

.active {
  outline: 1px solid var(--primary);
}
</style>
